<template>
  <basic-dialog
    v-model:open="toggle"
    width="57.5rem"
    modal-class="_product-modal-detail"
    :class="{ _mobile: isMobile }"
    :show-close="false"
    :fullscreen="isMobile"
    :z-index="isMobile ? 900 : 2020"
    :sticky-header="isMobile"
    append-to-body
    @closed="onClosed"
  >
    <template v-if="isMobile" #title>
      <div>Product Details</div>
    </template>

    <div class="_product-detail-wrapper" :class="{ _mobile: isMobile }">
      <div v-if="!isMobile" class="_close" @click="toggle = false">
        <img class="w-0.94rem h-0.94rem" :src="Close" />
      </div>

      <div class="_product-image">
        <img
          class="w-full h-full"
          style="object-fit: contain"
          :src="props.record?.image"
        />
      </div>
      <div class="_product-name">
        {{ props.record?.name }}
      </div>
      <div class="_product-price">
        <div>
          <span>$</span>
          <span>{{ props.record?.amount }}</span>
        </div>
        <span>USD</span>
      </div>
      <div v-if="props.record?.description" class="_product-description">
        {{ props.record?.description }}
      </div>
    </div>
  </basic-dialog>
</template>

<script lang="tsx" setup>
import Close from "@/assets/close.png";
import BasicDialog from "@/components/BasicDialog/basicDialog.vue";
import { useMedia } from "@/hooks/useMedia";

import { productDetailEmits, productDetailProps } from "./productDetail";

const props = defineProps(productDetailProps);
const emits = defineEmits(productDetailEmits);

const isMobile = useMedia();

const toggle = computed({
  get() {
    return props.open;
  },
  set(isOpen: boolean) {
    emits("update:open", isOpen);
  },
});

function onClosed() {
  emits("clear");
}
</script>

<style lang="less">
._product-modal-detail {
  .el-dialog {
    position: relative;
    padding: 2.81rem 2.5rem 3.36rem;
    .el-dialog__header {
      display: none;
    }

    &._mobile {
      padding: 0;
      .el-dialog__header {
        display: block;
        padding: 0;
      }
    }
  }
}
</style>

<style lang="less" scoped>
._close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0.81rem 1.25rem;
  cursor: pointer;
}

._product-image {
  padding: 2rem;
  height: 19.5rem;
  border-radius: 0.75rem;
  background-color: #373a3b;
}

._product-name {
  margin: 0.88rem 0 1.13rem;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 1.31rem;
  line-height: 1.5rem;
}

._product-price {
  @apply flex items-center text-primary;
  gap: 0.2rem;
  font-size: 1.31rem;
  line-height: 1.5rem;
}

._product-description {
  margin-top: 2.31rem;
  color: #cacaca;
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.25rem;
  text-align: justify;
}

._product-detail-wrapper {
  &._mobile {
    padding: 1.13rem;
    ._product-image {
      padding: 2.63rem;
      width: 100%;
      aspect-ratio: 1/1;
      min-height: 0;
    }
    ._product-name,
    ._product-price {
      font-size: 1.13rem;
      line-height: 1.31rem;
    }
    ._product-description {
      margin-top: 2.19rem;
    }
  }
}
</style>
